import { lazy, Suspense, useEffect, useState } from 'react'
import { App, Tabs } from 'antd'
import { themeStore, pageStore } from '../../Config/zustand'

import { PutIndexedDB } from '../../Utils/IndexedDB'
import { ICONMapping } from '../../Utils/IconMapping'

import { treeValue } from '../../Utils'
import { consoleStyle } from '../../Config/theme'

const BodyA01 = () => {
    const { pageActive, pageList, updateActive, updateList } = pageStore()
    const [items, setItems] = useState([])
    const { body } = themeStore()

    const { bodyBack, bodyPx, bodyRadio, boxShadow } = body
    const { tabsMax, tabsIsAll, tabsIconColor, tabsRadio, tabsBack, tabsActive, tabsBorderColor, tabsBorderType } = body
    const { fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = body
    const { iconState, iconSize, iconIndex, iconShadowX, iconShadowY, iconShadowS, iconShadowB } = body


    const onChange = async (e) => {
        // 记录当前active 
        await PutIndexedDB('openKey', e)
        updateActive(e)
        const { label, url } = treeValue(pageList, e, 'key')
        console.info(`%c[ 切换 ${label} -- ${url} ]`, consoleStyle)
    }

    const onModifyData = async (data) => {
        await PutIndexedDB('pageList', data)
    }

    const onEdit = (e) => {
        const data = pageList.filter(v => v.key !== e)
        if (pageActive === e) onChange(data.at(-1).key)
        updateList(data)
        onModifyData(data)
    }

    useEffect(() => {
        onModifyData(pageList)
        const arr = JSON.parse(JSON.stringify(pageList))
        const data = arr.map(item => {
            if (item.icon) item.icon = ICONMapping[item.icon]
            const Template = lazy(() => import(`../../Page/${item.url}.jsx`))
            item.children = <Template key={new Date().getTime()} url={item.url} />
            return item
        })
        setItems(data)
    }, [pageList])

    const TabsStyle = {
        '--tabsRadio': tabsRadio + 'px',
        '--tabsBack': tabsBack,
        '--tabsActive': tabsActive,
        '--tabsBorderColor': tabsBorderColor,
        '--tabsBorderType': tabsBorderType,

        '--fontColor': fontColor,
        '--fontFamily': fontFamily,
        '--fontWeight': fontWeight,
        '--fontStyle': fontStyle,
        '--fontSize': fontSize + 'px',

        '--iconState': iconState ? 'inline' : 'none',
        '--iconSize': iconSize + 'px',
        '--iconIndex': iconIndex + 'px',
        '--iconShadowX': iconShadowX + 'px',
        '--iconShadowY': iconShadowY + 'px',
        '--iconShadowS': iconShadowS + 'px',
        '--iconShadowB': iconShadowB,

        '--bodyBack': bodyBack,
        '--bodyPx': bodyPx + 'px',
        '--bodyRadio': bodyRadio + 'px',
        '--boxShadow': `var(${boxShadow})`

        // , ,  
    }

    return (
        <div className='BodyA01' style={TabsStyle}>
            <Suspense >
                <Tabs
                    hideAdd
                    items={items}
                    activeKey={pageActive}
                    type="editable-card"
                    onChange={onChange}
                    onEdit={onEdit}
                />
            </Suspense>
        </div>
    )
}

export default BodyA01